.check,
.radio,
.toggle {
  input {
    position: absolute;
    opacity: 0;
  }
  input + label {
    position: relative;
    cursor: pointer;
    padding: 0 10px 0 0;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
    .compactIcon &,
    .compact &,
    .reverse & {
      padding-right: 0;
    }
  }
  input + label:before {
    content: '';
    margin-right: 6px;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: all .3s;
    .compactIcon & {
      margin-right: 0;
    }
  }
  input:focus + label:before {
    box-shadow: $focus;
  }
  input:checked + label:before {
    background: $blue;
    border-color: $blue;
  }
  input:disabled + label {
    color: #353535;
    cursor: auto;
  }
  input:disabled + label:before {
    box-shadow: none;
    background: $optionsBg;
  }
  input:checked + label:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow:
      2px 0 0 white,
      4px 0 0 white,
      4px -2px 0 white,
      4px -3px 0 white,
      4px -4px 0 white,
      4px -5px 0 white,
      4px -6px 0 white,
      4px -7px 0 white,
      4px -8px 0 white;
    transform: rotate(45deg);
  }
}

.radio {
  input + label:before {
    border-radius: 50%;
  }
  input:checked + label:after {
    left: 7px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: none;
  }
}

.toggle {
  input + label:before {
    border-radius: 10px;
    width: 50px;
    content: '';
    transition: all .3s;
    background-position: 6px center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxLjkgMjEuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEuOSAyMS45IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8cGF0aCBkPSJNMTQuMSwxMS4zYy0wLjItMC4yLTAuMi0wLjUsMC0wLjdsNy41LTcuNWMwLjItMC4yLDAuMy0wLjUsMC4zLTAuN3MtMC4xLTAuNS0wLjMtMC43bC0xLjQtMS40QzIwLDAuMSwxOS43LDAsMTkuNSwwICBjLTAuMywwLTAuNSwwLjEtMC43LDAuM2wtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4yLTAuNywwTDMuMSwwLjNDMi45LDAuMSwyLjYsMCwyLjQsMFMxLjksMC4xLDEuNywwLjNMMC4zLDEuN0MwLjEsMS45LDAsMi4yLDAsMi40ICBzMC4xLDAuNSwwLjMsMC43bDcuNSw3LjVjMC4yLDAuMiwwLjIsMC41LDAsMC43bC03LjUsNy41QzAuMSwxOSwwLDE5LjMsMCwxOS41czAuMSwwLjUsMC4zLDAuN2wxLjQsMS40YzAuMiwwLjIsMC41LDAuMywwLjcsMC4zICBzMC41LTAuMSwwLjctMC4zbDcuNS03LjVjMC4yLTAuMiwwLjUtMC4yLDAuNywwbDcuNSw3LjVjMC4yLDAuMiwwLjUsMC4zLDAuNywwLjNzMC41LTAuMSwwLjctMC4zbDEuNC0xLjRjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjcgIHMtMC4xLTAuNS0wLjMtMC43TDE0LjEsMTEuM3oiIGZpbGw9IiNlMGUwZTAiLz4KPC9zdmc+Cg==);
  }
  input + label:after {
    content: '';
    position: absolute;
    left: 33px;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    box-shadow: none;
    transition: all .3s;
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.25);
  }
  input:checked + label:before {
    border-radius: 10px;
    background-position: 33px center;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI2IDI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNiAyNiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CiAgPHBhdGggZD0ibS4zLDE0Yy0wLjItMC4yLTAuMy0wLjUtMC4zLTAuN3MwLjEtMC41IDAuMy0wLjdsMS40LTEuNGMwLjQtMC40IDEtMC40IDEuNCwwbC4xLC4xIDUuNSw1LjljMC4yLDAuMiAwLjUsMC4yIDAuNywwbDEzLjQtMTMuOWgwLjF2LTguODgxNzhlLTE2YzAuNC0wLjQgMS0wLjQgMS40LDBsMS40LDEuNGMwLjQsMC40IDAuNCwxIDAsMS40bDAsMC0xNiwxNi42Yy0wLjIsMC4yLTAuNCwwLjMtMC43LDAuMy0wLjMsMC0wLjUtMC4xLTAuNy0wLjNsLTcuOC04LjQtLjItLjN6IiBmaWxsPSIjRkZGRkZGIi8+Cjwvc3ZnPgo=);
  }
  input:checked + label:after {
    left: 3px;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    box-shadow: none;
  }
  input + label:hover:after {
    background: $lightBlue;
  }
}
